<template>
    <van-swipe class="swipe-img" :autoplay="3000" stop-propagation>
        <van-swipe-item v-for="(image, index) in imgList" :key="index" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd(image)">
            <!-- <img :src="image.imgUrl" :style="imgStyle" /> -->
            <img v-lazy="image.imgUrl" />
        </van-swipe-item>
    </van-swipe>
</template>

<script>
export default {
    name: 'SwipeImg',
    props: {
        imgList: Array
    },
    data () {
        return {
            clickFlag: false,
            imgStyle: {}
        }
    },
    created () {
        // let width = document.documentElement.clientWidth
        // this.imgStyle = {
        //     width: `${width}px`
        // }
    },
    methods: {
        onTouchStart (e) {
            // this.clickIndex = 0; // 为了兼容安卓部分情况而加，如果不需要可忽略
            this.clickFlag = false
        },
        // 用于判断滑动还是点击
        onTouchMove (e) {
            this.clickFlag = true
            // 为了兼容安卓部分情况而加的判断，如果不需要可忽略，若需要，注释上面一行代码，打开下面三行代码
            // this.clickIndex = this.clickIndex + 1;
            // if (this.clickIndex > 2) {
            //   this.clickFlag = true;
            // }
        },
        onTouchEnd (e) {
            if (this.clickFlag) { // 滑动
                // console.log('滑动')
            } else { // 点击
                this.$emit('onClick', e)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.swipe-img {
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    img {
        width: 100%;
        height: 130px;
        border-radius: 5px;
        object-fit: cover;
        object-position: center;
    }
}
</style>
